<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小站</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/blogs.css">
</head>

<body>

    <!-- <header id="header">
    <div class="container flex align-items-center justify-content-between">
        <a href="./index.html"><img class="logo" src="/images/logo.png" alt=""></a>
        <nav id="navbar" class="navbar">
            <ul>
                <li class="index active"><a href="./index.html">首页</a></li>
                <li class="protfolio"><a href="./protfolio.html">作品展示</a></li>
                <li class="blogs"><a href="./blogs.html">博客</a></li>
                <li class="about"><a href="./about.html">我的简历</a></li>
                <li class="contact"><a href="./contact.html">联系我</a></li>

            </ul>
        </nav>
    </div>
    </header> -->
    <header id="header"></header>
    <main>

        <!-- ======= Hero Section ======= -->
        <section id="hero">
            <img src="/images/MDkyYjVkNi5qcGc@2x.png" class="portrait" alt="">
            <p class="slogan">我是一名大三学生，<br> 同时也是一名<span>Web前端工程师</span></p>
            <a class="about-me" href="./about.html">关于我</a>
        </section><!-- End Hero -->

        <!-- 作品展示 section -->
        <section id="portfolio">
            <h2 class="section-title">作品展示</h2>
            <div class="carousel container">
                <div class="arrows">
                    <span class="prev invalid"></span>
                    <span class="next"></span>
                </div>
                <div class="imgs flex">
                    <div class="imgs-wrap">
                      <img src="/images/1@2x.png" alt="" />
                      <div class="imgs-info">
                        <h4>App 1</h4>
                        <div class="imgs-links">
                          <a href="#"><i class="iconfont qm-link"></i></a>
                        </div>
                      </div>
                    </div>
                    <div class="imgs-wrap">
                      <img src="/images/2@2x.png" alt="" />
                      <div class="imgs-info">
                        <h4>App 1</h4>
                        <div class="imgs-links">
                          <a href="#"><i class="iconfont qm-link"></i></a>
                        </div>
                      </div>
                    </div>
                    <div class="imgs-wrap">
                      <img src="/images/3@2x.png" alt="" />
                      <div class="imgs-info">
                        <h4>App 1</h4>
                        <div class="imgs-links">
                          <a href="#"><i class="iconfont qm-link"></i></a>
                        </div>
                      </div>
                    </div>
                    <div class="imgs-wrap">
                      <img src="/images/1@2x.png" alt="" />
                      <div class="imgs-info">
                        <h4>App 1</h4>
                        <div class="imgs-links">
                          <a href="#"><i class="iconfont qm-link"></i></a>
                        </div>
                      </div>
                    </div>
                    <div class="imgs-wrap">
                      <img src="/images/2@2x.png" alt="" />
                      <div class="imgs-info">
                        <h4>App 1</h4>
                        <div class="imgs-links">
                          <a href="#"><i class="iconfont qm-link"></i></a>
                        </div>
                      </div>
                    </div>
                    <div class="imgs-wrap">
                      <img src="/images/3@2x.png" alt="" />
                      <div class="imgs-info">
                        <h4>App 1</h4>
                        <div class="imgs-links">
                          <a href="#"><i class="iconfont qm-link"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="more-box"><a class="btn orange look-more" href="./protfolio.html">查看更多</a></div>
        </section>


        <section id="blog">
            <h2 class="section-title blue">作品展示</h2>
            <div class="container article-wrap">
                <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog1.png" alt=""></a>
                    <div class="content-wrap">
                        <a href="blog-single.html">
                            <h3>大标题大标题大标题</h3>
                        </a>
                        <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                            whjiojf0jis js</p>
                        <div class="flex justify-content-between align-items-center">
                            <span class="date"><i clas="icontont qm-clock"></i>2022-07-30</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                        </div>
                    </div>
                </article>
                <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog2.png" alt=""></a>
                    <div class="content-wrap">
                        <a href="blog-single.html">
                            <h3>大标题大标题大标题</h3>
                        </a>
                        <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                            whjiojf0jis js</p>
                        <div class="flex justify-content-between align-items-center">
                            <span class="date"><i clas="icontont qm-clock"></i>2022-07-30</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                        </div>
                    </div>
                </article>
                <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog3.png" alt=""></a>
                    <div class="content-wrap">
                        <a href="blog-single.html">
                            <h3>大标题大标题大标题</h3>
                        </a>
                        <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                            whjiojf0jis js</p>
                        <div class="flex justify-content-between align-items-center">
                            <span class="date"><i clas="icontont qm-clock"></i>2022-07-30</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                        </div>
                    </div>
                </article>
                <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog4.png" alt=""></a>
                    <div class="content-wrap">
                        <a href="blog-single.html">
                            <h3>大标题大标题大标题</h3>
                        </a>
                        <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                            whjiojf0jis js</p>
                        <div class="flex justify-content-between align-items-center">
                            <span class="date"><i clas="icontont qm-clock"></i>2022-07-30</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                        </div>
                    </div>
                </article>
                <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog5.png" alt=""></a>
                    <div class="content-wrap">
                        <a href="blog-single.html">
                            <h3>大标题大标题大标题</h3>
                        </a>
                        <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                            whjiojf0jis js</p>
                        <div class="flex justify-content-between align-items-center">
                            <span class="date"><i clas="icontont qm-clock"></i>2022-07-30</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                        </div>
                    </div>
                </article>
                <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog6.png" alt=""></a>
                    <div class="content-wrap">
                        <a href="blog-single.html">
                            <h3>大标题大标题大标题</h3>
                        </a>
                        <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                            whjiojf0jis js</p>
                        <div class="flex justify-content-between align-items-center">
                            <span class="date"><i clas="icontont qm-clock"></i>2022-07-30</span>
                        <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                        </div>
                    </div>
                </article>
                <!-- <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog1.png" alt=""></a>
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                        whjiojf0jis js</p>
                    <span><i clas="icontont qm-clock"></i>2022-07-30</span>
                    <a href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </article>
                <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog1.png" alt=""></a>
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                        whjiojf0jis js</p>
                    <span><i clas="icontont qm-clock"></i>2022-07-30</span>
                    <a href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </article>
                <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog1.png" alt=""></a>
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                        whjiojf0jis js</p>
                    <span><i clas="icontont qm-clock"></i>2022-07-30</span>
                    <a href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </article>
                <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog1.png" alt=""></a>
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                        whjiojf0jis js</p>
                    <span><i clas="icontont qm-clock"></i>2022-07-30</span>
                    <a href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </article>
                <article>
                    <a href="blog-single.html"><img src="/images/blogs/blog1.png" alt=""></a>
                    <a href="blog-single.html">
                        <h3>大标题大标题大标题</h3>
                    </a>
                    <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                        whjiojf0jis js</p>
                    <span><i clas="icontont qm-clock"></i>2022-07-30</span>
                    <a href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </article> -->
            </div>
        </section>


    </main>

    <footer></footer>
    <script src="./js/main.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>